/**
 * Created by 69466 on 2018/9/13.
 */
import React, {Component} from 'react';
import {StyleSheet,Modal} from 'react-native';
import ImageViewer from "react-native-image-zoom-viewer";

export default class ZomImageViewer extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
            selectIndex: 0,
            images: null,
        };
    }

    show = (images, selectIndex = 0) => {
        this.setState({isOpen: true, images, selectIndex})
    }

    dismiss = () => {
        this.setState({isOpen: false})
    }

    render() {
        const {selectIndex, isOpen, images} = this.state;

        if (images === null)
            return null;
        let imageData = images.map(url => {
            let data = {};
            data['url'] = url;
            return data;
        })
        Log('数据', imageData,images, selectIndex);
        return (
            <Modal visible={isOpen} transparent={true}
                   onRequestClose={()=> this.dismiss()}>

                <ImageViewer imageUrls={imageData}
                             onClick={() => this.dismiss()}
                             enableImageZoom={true}
                             index={selectIndex}
                             saveToLocalByLongPress={false}/>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    modal: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'black'
    },
    content: {
        fontSize: 14,
        color: '#999999',
        marginTop: 10,
        lineHeight: 25
    },

});


